<!--
 * @Description: 活动结束,1. 计算中 2.空数据 3. 最后一个下注者 4. pk 获胜
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-07-15 09:46:32
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-09-26 09:42:54
-->
<template>
  <div class="lotteryEnd" v-if="lottery">
    <!-- 奖池 -->
    <div class="jackpot" :class="{ 'jackpot-detail': isDetail }">
      <!-- 背景图 -->
      <img
        v-if="isSun && !isDetail"
        class="jackpot-bg"
        src="/image/lotterymoney/lotteryEnd-jackpot1-bg.svg"
      />
      <img
        v-else-if="isSun && isDetail"
        class="jackpot-bg jackpot-bg-detail"
        src="/image/lotterymoney/lotteryEnd-jackpot3-bg.svg"
      />
      <img
        v-else-if="!isSun && !isDetail"
        class="jackpot-bg"
        src="/image/lotterymoney/lotteryEnd-jackpot-bg.svg"
      />

      <img
        v-else
        class="jackpot-bg jackpot-bg-detail"
        src="/image/lotterymoney/lotteryEnd-jackpot2-bg.svg"
      />
      <!-- 期数 -->
      <div
        class="jackpot-qs items-center"
        :class="{ 'jackpot-qs-detail': isDetail }"
      >
        <div class="jackpot-qs-text" :class="{ 'jackpot-qs-text-sun': isSun }">
          <img
            v-if="isSun"
            class="jackpot-qs-left"
            src="/image/lotterymoney/lotteryEnd-jcbt1-bg.svg"
          />
          <img
            v-else
            class="jackpot-qs-left"
            src="/image/lotterymoney/lotteryEnd-jcbt-bg.svg"
          />
          {{
            $t("lotteryMoney.cjdyj") +
            ` - ` +
            formatWithTimeZone(lottery.beginTime, "Asia/Jakarta")
          }}
          <img
            v-if="isSun"
            class="jackpot-qs-right"
            src="/image/lotterymoney/lotteryEnd-jcbt1-bg.svg"
          />
          <img
            v-else
            class="jackpot-qs-right"
            src="/image/lotterymoney/lotteryEnd-jcbt-bg.svg"
          />
        </div>
      </div>
      <!-- bdc 数量 -->
      <div class="jackpot-bdc" :class="{ 'jackpot-bdc-detail': isDetail }">
        {{
          toThousands(
            decimalToLength(
              new Decimal(
                lottery.pool ? lottery.pool.lotteryPoolAmount || 0 : 0
              ).mul(1000)
            )
          )
        }}
        BDC
      </div>
      <!-- 奖池数量 -->
      <div
        class="jackpot-money"
        :class="{ 'jackpot-money-detail': isDetail }"
        :data-text="` = $${toThousands(
          decimalToLength(
            lottery.pool ? lottery.pool.lotteryPoolAmount || 0 : 0
          )
        )}`"
      >
        = ${{
          toThousands(
            decimalToLength(
              lottery.pool ? lottery.pool.lotteryPoolAmount || 0 : 0
            )
          )
        }}
      </div>

      <!-- 分配比例 -->
      <div
        class="jackpot-bottom items-center"
        :class="{ 'jackpot-bottom-sun': isSun }"
      >
        <!-- 分配比例 展开/收起 -->
        <div
          class="jackpot-unfold items-center"
          :class="{
            'jackpot-unfold-sun': isSun,
            'jackpot-unfold-detail': isDetail,
          }"
        >
          <div class="jackpot-unfold-text">
            {{ $t("lotteryMoney.bqdj") }}
          </div>
          <div
            class="jackpot-unfold-value"
            :class="{ 'jackpot-unfold-value-sun': isSun }"
          >
            ${{
              lottery.pool
                ? decimalToLength(lottery.pool.sessionPrizeAmount)
                : 0
            }}
          </div>
          <div class="jackpot-unfold-text">
            {{ lottery.pool ? (lottery.pool.sessionPrizeRate || 0) * 100 : 0 }}%
          </div>
        </div>
        <div class="jackpot-bottom-item">
          <div class="items-center jackpot-bottom-item-top">
            <div
              class="jackpot-bottom-item-title"
              :class="{ 'jackpot-bottom-item-title-sun': isSun }"
            >
              {{ $t("lotteryMoney.cjfh") }}
            </div>
            <div
              class="jackpot-bottom-item-bfb"
              :class="{ 'jackpot-bottom-item-bfb-sun': isSun }"
            >
              {{ lottery.pool ? (lottery.pool.teamPrizeRate || 0) * 100 : 0 }}%
            </div>
          </div>
          <div
            class="jackpot-bottom-item-value"
            :class="{ 'jackpot-bottom-item-value-sun': isSun }"
          >
            ${{
              decimalToLength(
                lottery.pool ? lottery.pool.teamPrizeAmount || 0 : 0
              )
            }}
          </div>
        </div>

        <div class="jackpot-bottom-item">
          <div class="items-center jackpot-bottom-item-top">
            <div
              class="jackpot-bottom-item-title"
              :class="{ 'jackpot-bottom-item-title-sun': isSun }"
            >
              {{ $t("lotteryMoney.jrxyqjc") }}
            </div>
            <div
              class="jackpot-bottom-item-bfb"
              :class="{ 'jackpot-bottom-item-bfb-sun': isSun }"
            >
              {{
                lottery.pool
                  ? lottery.pool.moveToNextSessionPrizeRate * 100
                  : 0
              }}%
            </div>
          </div>
          <div
            class="jackpot-bottom-item-value"
            :class="{ 'jackpot-bottom-item-value-sun': isSun }"
          >
            ${{
              lottery.pool
                ? decimalToLength(lottery.pool.moveToNextSessionPrizeAmount)
                : 0
            }}
          </div>
        </div>

        <div class="jackpot-bottom-item">
          <div class="items-center jackpot-bottom-item-top">
            <div
              class="jackpot-bottom-item-title"
              :class="{ 'jackpot-bottom-item-title-sun': isSun }"
            >
              {{ $t("lotteryMoney.jrcjjc") }}
            </div>
            <div
              class="jackpot-bottom-item-bfb"
              :class="{ 'jackpot-bottom-item-bfb-sun': isSun }"
            >
              {{
                lottery.pool
                  ? lottery.pool.moveToSupperWinnerPrizeRate * 100
                  : 0
              }}%
            </div>
          </div>
          <div
            class="jackpot-bottom-item-value"
            :class="{ 'jackpot-bottom-item-value-sun': isSun }"
          >
            ${{
              lottery.pool
                ? decimalToLength(lottery.pool.moveToSupperWinnerPrizeAmount)
                : 0
            }}
          </div>
        </div>
      </div>
    </div>

    <!-- 本期大赢家 / 获胜队伍 -->
    <img
      class="winnerteam-topimg"
      src="/image/lotterymoney/lotteryEnd-dyjdw-icon.svg"
    />

    <div class="winnerteam">
      <div class="winnerteam-bg" :class="{ 'winnerteam-bg-sun': isSun }">
        <!-- 大赢家 -->
        <div class="winnerteamtitle items-center">
          <div
            class="winnerteamtitle-left"
            :class="{ 'winnerteamtitle-left-sun': isSun }"
          ></div>
          <div class="winnerteamtitle-text items-center">
            <img
              v-if="isSun"
              class="winnerteamtitle-text-icon"
              src="/image/title-yellow-icon.svg"
            />
            <img
              v-else
              class="winnerteamtitle-text-icon"
              src="/image/pledge/title-icon.svg"
            />
            {{ $t("lotteryMoney.dyjdz") }}
            <img
              v-if="isSun"
              class="winnerteamtitle-text-icon"
              src="/image/title-yellow-icon.svg"
            />
            <img
              v-else
              class="winnerteamtitle-text-icon"
              src="/image/pledge/title-icon.svg"
            />
          </div>
          <div
            class="winnerteamtitle-right"
            :class="{ 'winnerteamtitle-right-sun': isSun }"
          ></div>
        </div>
        <div class="newWinner">
          <img
            v-if="isSun"
            class="newWinner-bg"
            src="/image/lotterymoney/lotteryEnd-dyjbg1-bg.svg"
          />
          <img
            v-else
            class="newWinner-bg"
            src="/image/lotterymoney/lotteryEnd-dyjbg-bg.svg"
          />
          <!-- 计算中 -->
          <div v-if="status == 6" class="newWinner-jsz items-center">
            <img
              class="newWinner-jsz-img"
              src="/image/lotterymoney/lotteryEnd-jsz-icon.svg"
            />
            <div
              class="newWinner-jsz-text"
              :class="{ 'newTeam-jsz-text-sun': isSun }"
            >
              {{ $t("lotteryMoney.jszing") }}
            </div>
          </div>
          <!-- 头像/信息 -->
          <div v-else class="newWinner-info items-center">
            <div class="newWinner-info-avatar items-center">
              <img
                v-if="isSun"
                class="newWinner-info-avatar-bg"
                src="/image/lotterymoney/lotteryEnd-dyjtxbg1-bg.svg"
              />
              <img
                v-else
                class="newWinner-info-avatar-bg"
                src="/image/lotterymoney/lotteryEnd-dyjtxbg-bg.svg"
              />
              <ImgNuxt
                class="newWinner-info-avatar-img"
                isHttp
                :src="
                  (lottery.winner && lottery.winner.avatar) ||
                  file.avatarDefault
                "
                :placeholder="file.avatarDefault"
              />
            </div>

            <div style="margin-left: 9px">
              <!-- 空数据 -->
              <template v-if="!lottery.winner || !lottery.winner.sid">
                <div
                  class="newWinner-info-zwsj"
                  :class="{ 'newWinner-info-zwsj-sun': isSun }"
                >
                  {{ $t("lotteryMoney.zwsj") }}
                </div>
              </template>
              <!-- 名字/sid -->
              <template v-else>
                <div class="newWinner-info-name">
                  {{
                    lottery.winner && lottery.winner.nickname
                      ? lottery.winner.nickname.substring(0, 11)
                      : "--"
                  }}{{
                    lottery.winner &&
                    lottery.winner.nickname &&
                    lottery.winner.nickname.length > 11
                      ? "..."
                      : ""
                  }}
                </div>
                <div
                  class="newWinner-info-sid"
                  :class="{ 'newWinner-info-sid-sun': isSun }"
                >
                  {{
                    lottery.winner && lottery.winner.sid
                      ? lottery.winner.sid.substring(3, 100)
                      : "--"
                  }}
                </div>
              </template>
            </div>
          </div>
          <!-- 奖金 -->
          <div class="newWinner-jj" :class="{ 'newWinner-jj-sun': isSun }">
            <div
              class="newWinner-jj-leftpoint"
              :class="{ 'newWinner-jj-leftpoint-sun': isSun }"
            ></div>
            <div
              class="newWinner-jj-rightpoint"
              :class="{ 'newWinner-jj-rightpoint-sun': isSun }"
            ></div>
            <div class="newWinner-jj-bdc">
              {{
                toThousands(
                  decimalToLength(
                    new Decimal(
                      (lottery.winner && lottery.winner.sessionPrizeAmount) || 0
                    ).mul(1000)
                  )
                )
              }}
              BDC
            </div>
            <div class="newWinner-jj-centerline"></div>
            <div class="newWinner-jj-money">
              =${{
                toThousands(
                  decimalToLength(
                    (lottery.winner && lottery.winner.sessionPrizeAmount) || 0
                  )
                )
              }}
            </div>
          </div>
          <!-- 最后一位下注 -->
          <div
            class="newWinner-zhywxzz"
            v-if="
              lottery.winner && !lottery.winner.winType && lottery.winner.sid
            "
          >
            {{ $t("lotteryMoney.zhywxzz") }}
          </div>
          <!-- 哈希值+得分 -->
          <div
            v-if="
              lottery.winner &&
              lottery.winner.winType == 1 &&
              lottery.winner.transactionHash
            "
            class="newWinner-hash items-center"
            :class="{ 'newWinner-hash-sun': isSun }"
            @click.stop="jumpPage('webview1', lottery.winner.transactionHash)"
          >
            <!-- 哈希值 -->
            <div>
              Hash:
              {{ lottery.winner.transactionHash.substring(0, 2) }}...
              <span class="newWinner-hash-value">
                {{
                  lottery.winner.transactionHash.substring(
                    lottery.winner.transactionHash.length -
                      ((lottery &&
                        lottery.hashPk &&
                        lottery.hashPk.hashScoreLength) ||
                        6),
                    lottery.winner.transactionHash.length
                  )
                }}
              </span>
            </div>
            <img
              class="newWinner-hash-copy"
              src="/image/copy1-icon.svg"
              @click.stop="getCopy(lottery.winner.transactionHash)"
            />
          </div>
        </div>
        <!-- 邀请人和大嬴家中间的连接线 -->
        <div class="inviter-line items-center">
          <div
            class="inviter-line-left"
            :class="{ 'inviter-line-left-sun': isSun }"
          ></div>
          <div
            class="inviter-line-right"
            :class="{ 'inviter-line-right-sun': isSun }"
          ></div>
        </div>
        <!-- 邀请人 -->
        <div class="inviter" :class="{ 'inviter-sun': isSun }">
          <!-- 左上角 -->
          <div
            class="inviter-lefttop items-center"
            :class="{ 'inviter-lefttop-sun': isSun }"
          >
            <div class="inviter-lefttop-text">
              {{ $t("inviteFriends.yqr") }}
            </div>
            <van-popover class="popoverEnd" placement="bottom">
              <div class="popoverEnd-alert">
                {{ $t("inviteFriends.yqrDesc") }}
              </div>
              <template #reference>
                <img class="inviter-lefttop-img" src="/image/wh3-icon.svg" />
              </template>
            </van-popover>
          </div>
          <!-- 空数据 -->
          <div v-if="!inviterData" class="inviter-notData items-center">
            <img
              v-if="isSun"
              class="inviter-notData-img"
              src="/image/inviteFriends/lottery-nodata-icon1.svg"
            />
            <img
              v-else
              class="inviter-notData-img"
              src="/image/inviteFriends/lottery-nodata-icon.svg"
            />
            <div
              class="inviter-notData-text"
              :class="{ 'inviter-notData-text-sun': isSun }"
            >
              {{ $t("lotteryMoney.zwsj") }}
            </div>
          </div>
          <!-- 头像,信息 / 奖金 -->
          <div v-else class="inviter-content items-center">
            <div class="inviter-content-info items-center">
              <ImgNuxt
                class="inviter-content-info-avatar"
                isHttp
                :src="inviterData.avatar || file.avatarDefault"
                :placeholder="file.avatarDefault"
              />

              <div style="margin-left: 8px">
                <!-- 名字/sid -->
                <div class="inviter-content-info-name">
                  {{
                    inviterData.nickname
                      ? inviterData.nickname.substring(0, 11)
                      : "--"
                  }}{{
                    inviterData.nickname && inviterData.nickname.length > 11
                      ? "..."
                      : ""
                  }}
                </div>
                <div
                  class="inviter-content-info-sid"
                  :class="{ 'inviter-content-info-sid-sun': isSun }"
                >
                  {{
                    inviterData.sid ? inviterData.sid.substring(3, 100) : "--"
                  }}
                </div>
              </div>
            </div>
            <!-- 奖金 -->
            <div
              class="inviter-content-jj"
              :class="{ 'inviter-content-jj-sun': isSun }"
            >
              <div
                class="inviter-content-jj-leftpoint"
                :class="{ 'inviter-content-jj-leftpoint-sun': isSun }"
              ></div>
              <div
                class="inviter-content-jj-rightpoint"
                :class="{ 'inviter-content-jj-rightpoint-sun': isSun }"
              ></div>
              <div
                class="inviter-content-jj-bdc"
                :class="{ 'inviter-content-jj-bdc-sun': isSun }"
              >
                {{
                  toThousands(
                    decimalToLength(
                      new Decimal(
                        inviterData.inviteSuperWinnerPrizeAmount || 0
                      ).mul(1000)
                    )
                  )
                }}
                BDC
              </div>
              <div class="inviter-content-jj-centerline"></div>
              <div
                class="inviter-content-jj-money"
                :class="{ 'inviter-content-jj-money-sun': isSun }"
              >
                {{ $t("inviteFriends.ewjl") }}
              </div>
            </div>
          </div>
        </div>

        <!-- 分割线 -->
        <div class="winnerteam-line"></div>
        <!-- 获胜队伍 -->
        <div class="winnerteamtitle items-center">
          <div
            class="winnerteamtitle-left"
            :class="{ 'winnerteamtitle-left-sun': isSun }"
          ></div>
          <div class="winnerteamtitle-text items-center">
            <img
              v-if="isSun"
              class="winnerteamtitle-text-icon"
              src="/image/title-yellow-icon.svg"
            />
            <img
              v-else
              class="winnerteamtitle-text-icon"
              src="/image/pledge/title-icon.svg"
            />
            {{ $t("lotteryMoney.hsdw") }}
            <img
              v-if="isSun"
              class="winnerteamtitle-text-icon"
              src="/image/title-yellow-icon.svg"
            />
            <img
              v-else
              class="winnerteamtitle-text-icon"
              src="/image/pledge/title-icon.svg"
            />
          </div>
          <div
            class="winnerteamtitle-right"
            :class="{ 'winnerteamtitle-right-sun': isSun }"
          ></div>
        </div>
        <div class="newTeam">
          <img
            v-if="isSun"
            class="newTeam-bg"
            src="/image/lotterymoney/lotteryEnd-dyjbg1-bg.svg"
          />
          <img
            v-else
            class="newTeam-bg"
            src="/image/lotterymoney/lotteryEnd-dyjbg-bg.svg"
          />
          <!-- 计算中 -->
          <div v-if="status == 6" class="newTeam-jsz items-center">
            <img
              class="newTeam-jsz-img"
              src="/image/lotterymoney/lotteryEnd-jsz-icon.svg"
            />
            <div
              class="newTeam-jsz-text"
              :class="{ 'newTeam-jsz-text-sun': isSun }"
            >
              {{ $t("lotteryMoney.jszing") }}
            </div>
          </div>
          <!-- 队伍头像/信息 -->
          <div v-else class="newTeam-info items-center">
            <div class="newTeam-info-avatar items-center">
              <img
                v-if="isSun"
                class="newTeam-info-avatar-bg"
                src="/image/lotterymoney/lotteryEnd-dyjtxbg1-bg.svg"
              />
              <img
                v-else
                class="newTeam-info-avatar-bg"
                src="/image/lotterymoney/lotteryEnd-dyjtxbg-bg.svg"
              />

              <img
                v-if="lottery.winner && lottery.winner.teamConfigId == 1"
                class="newTeam-info-avatar-img"
                src="/image/lotterymoney/team-red-icon.png"
              />
              <img
                v-else-if="lottery.winner && lottery.winner.teamConfigId == 2"
                class="newTeam-info-avatar-img"
                src="/image/lotterymoney/team-yellow-icon.png"
              />
              <img
                v-else-if="lottery.winner && lottery.winner.teamConfigId == 3"
                class="newTeam-info-avatar-img"
                src="/image/lotterymoney/team-blue-icon.png"
              />
              <img
                v-else
                class="newTeam-info-avatar-img"
                src="/image/lotterymoney/team-default0-icon.png"
              />
            </div>

            <div style="margin-left: 9px">
              <!-- 空数据 -->
              <template v-if="!lottery.winner || !lottery.winner.sid">
                <div
                  class="newTeam-info-zwsj"
                  :class="{ 'newTeam-info-zwsj-sun': isSun }"
                >
                  {{ $t("lotteryMoney.zwsj") }}
                </div>
              </template>
              <!-- 名字/sid -->
              <template v-else>
                <div class="newTeam-info-name">
                  {{
                    lottery.winner && lottery.winner.teamName
                      ? lottery.winner.teamName
                      : "--"
                  }}
                </div>
                <div
                  class="newTeam-info-sid"
                  :class="{ 'newTeam-info-sid-sun': isSun }"
                >
                  {{
                    lottery.winner
                      ? toThousands(lottery.winner.teamUserCount)
                      : "--"
                  }}
                  {{ $t("lotteryMoney.xxr") }}
                </div>
              </template>
            </div>
          </div>
          <!-- 奖金 -->
          <div class="newTeam-jj" :class="{ 'newTeam-jj-sun': isSun }">
            <div
              class="newTeam-jj-leftpoint"
              :class="{ 'newTeam-jj-leftpoint-sun': isSun }"
            ></div>
            <div
              class="newTeam-jj-rightpoint"
              :class="{ 'newTeam-jj-rightpoint-sun': isSun }"
            ></div>
            <div class="newTeam-jj-bdc">
              {{
                toThousands(
                  decimalToLength(
                    new Decimal(
                      (lottery.winner && lottery.winner.teamPrizeAmount) || 0
                    ).mul(1000)
                  )
                )
              }}
              BDC
            </div>
            <div class="newTeam-jj-centerline"></div>
            <div class="newTeam-jj-money">
              =${{
                toThousands(
                  decimalToLength(
                    (lottery.winner && lottery.winner.teamPrizeAmount) || 0
                  )
                )
              }}
            </div>
          </div>
          <!-- 队伍下注记录 -->
          <div
            class="newTeam-dwxzjl items-center"
            @click="jumpPage('teamBonusDetail')"
          >
            <div class="newTeam-dwxzjl-left"></div>
            <div class="newTeam-dwxzjl-center items-center">
              <div class="newTeam-dwxzjl-center-text">
                {{ $t("lotteryMoney.dwfhck") }}
              </div>
              <img
                class="newTeam-dwxzjl-center-img"
                src="/image/jt-right-fff.svg"
              />
            </div>
            <div class="newTeam-dwxzjl-right"></div>
          </div>
        </div>
        <!-- 详情页面插槽位置 -->
        <slot></slot>
      </div>
    </div>

    <!-- 参与人数 -->
    <div class="participants items-center">
      <div
        class="participants-item items-center"
        style="
          border-right: 0.7px solid rgba(115, 119, 128, 0.15);
          border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
        "
      >
        <div class="participants-item-top">
          {{
            lottery.sessionUserCount
              ? toThousands(lottery.sessionUserCount)
              : "--"
          }}
        </div>
        <div class="participants-item-bottom">
          {{ $t("lotteryMoney.cyrs") }}
        </div>
      </div>
      <div
        class="participants-item items-center"
        style="border-bottom: 0.7px solid rgba(115, 119, 128, 0.15)"
      >
        <div class="participants-item-top">
          {{
            lottery.sessionTotalDrawCount
              ? toThousands(lottery.sessionTotalDrawCount || 0)
              : "--"
          }}
        </div>
        <div class="participants-item-bottom">
          {{ $t("lotteryMoney.cjcs") }}
        </div>
      </div>
      <div
        class="participants-item items-center"
        style="border-right: 0.7px solid rgba(115, 119, 128, 0.15)"
      >
        <div class="participants-item-top">
          {{
            lottery.sessionTotalCostAmount
              ? `${toThousands(
                  decimalToLength(Number(lottery.sessionTotalCostAmount) * 1000)
                )} BDC`
              : "--"
          }}
        </div>
        <div class="participants-item-bottom">
          {{ $t("lotteryMoney.xzbdc") }}
        </div>
      </div>
      <div class="participants-item items-center">
        <div class="participants-item-top">
          {{
            lottery.hashPk
              ? lottery.hashPk.successSyncToChainCount || "--"
              : "--"
          }}
        </div>
        <div class="participants-item-bottom">
          {{ $t("lotteryMoney.dbsl") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="lotteryEnd">
import { toThousands, decimalToLength } from "@/utils";
import { useClipboard } from "@vueuse/core";
import Decimal from "decimal.js";
import { BDC_blockchain_Host } from "@/config";

const props = defineProps<{
  lottery: Object;
  status: Number;
  isSun: boolean; // 是不是周日的超级大赢家
  isDetail: boolean; // 是不是详情页面
}>();

const { t } = useI18n();

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

onMounted(() => {});

const jumpPage = async (val: string, params?: string) => {
  if (val == "teamBonusDetail") {
    if (!props.lottery.sessionId || !props.lottery.winner) return;
    navigateI18nTo({
      path: "/lottery-money/team-bonus-detail",
      query: {
        teamName: props.lottery.winner
          ? props.lottery.winner.teamName || "--"
          : "--",
        sessionId: props.lottery.sessionId,
        beginTime: props.lottery.beginTime,
        beginTimeCopy: props.lottery.beginTimeCopy || "",
        teamPrizeAmount: props.lottery.winner
          ? props.lottery.winner.teamPrizeAmount
          : 0,
        teamUserCount: props.lottery.winner
          ? props.lottery.winner.teamUserCount || 0
          : 0,
        teamDrawCount: props.lottery.winner
          ? props.lottery.winner.teamDrawCount || 0
          : 0,
      },
    });
  } else if (val === "webview1" && params) {
    bridge.defaultBrowserOpen(`${BDC_blockchain_Host}${params}`);
    // navigateI18nTo({
    //   path: "/webview",
    //   query: {
    //     src: `${BDC_blockchain_Host}${params}`,
    //     title: t("lotteryMoney.hashPage"),
    //     isShow: 1,
    //   },
    // });
  }
};

/**
 * @description: 获取剪贴板内容
 */
const getCopy = (val) => {
  if (!val) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast(t("mvp.other.bzcjtb"));
  } else {
    copy(val);
    showToast(t("mvp.other.fzcg"));
  }
};

// 期数格式化
const formatWithTimeZone = (date, timeZone) => {
  let time = date;

  if (
    Number(props.lottery.beginTimeCopy) < 1725552000000 &&
    props.lottery.beginTimeCopy
  ) {
    time = props.lottery.beginTimeCopy;
  }

  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(time)));
  const month = monthFormatter.format(new Date(Number(time)));
  const day = dayFormatter.format(new Date(Number(time)));

  return `${year}.${month}.${day}`;
};

const inviterData = computed(() => {
  if (props.lottery && props.lottery.inviterInfo) {
    return props.lottery.inviterInfo;
  }
  return undefined;
});
// const inviterData = ref({});
// inviterData.value = {
//   nickname: "zhj123456789",
//   avatar:
//     "https://asset.btcdana.vip/upload/picture/feed/1641483677075-5589b8e61da249ae936320b54515499b.png",
//   sid: "10056231462",
//   inviteSuperWinnerPrizeAmount: 2345.289,
// };
</script>
<style scoped lang="scss">
.lotteryEnd {
  position: relative;
}
.jackpot {
  position: relative;
  background-color: transparent;
  height: 180 * 2px;
  padding: 0 15 * 2px;
  &-detail {
    height: 165 * 2px;
  }
  &-bg {
    width: 100%;
    height: 150 * 2px;
    object-fit: cover;
    &-detail {
      margin-top: 26 * 2px;
      height: initial;
    }
  }
  &-qs {
    position: absolute;
    top: 26 * 2px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    &-detail {
      top: 6.2 * 2px;
    }
    &-left {
      position: absolute;
      top: 0;
      left: -15 * 2px;
    }
    &-text {
      position: relative;
      padding: 3.5 * 2px 4 * 2px;
      background-color: #83d1ff;
      color: #3f93e8;
      text-align: center;
      font-size: 12 * 2px;
      font-weight: 510;
      text-wrap: nowrap;
      white-space: nowrap;
      &-sun {
        color: #cc9a2d;
        background-color: #ffd66c;
      }
    }
    &-right {
      position: absolute;
      top: 0;
      transform: rotateY(180deg);
      right: -15 * 2px;
    }
  }
  &-bdc {
    position: absolute;
    z-index: 9;
    top: 60 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13 * 2px;
    font-weight: 590;
    &-detail {
      top: 40 * 2px;
    }
  }
  &-money {
    position: absolute;
    z-index: 9;
    top: 80 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 20 * 2px;
    font-weight: 1000;
    &-detail {
      top: 60 * 2px;
    }
  }
  &-money::before,
  &-money::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 0.25);
  }

  &-money::before {
    transform: translate(0px, 3px);
  }

  &-money::after {
    transform: translate(0px, 3px);
  }

  &-unfold {
    position: absolute;
    z-index: 9;
    top: 0 * 2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 12 * 2px 12 * 2px;
    background: linear-gradient(356deg, #78bbeb 3.33%, #83d1ff 96.67%);
    padding: 2.5 * 2px 8 * 2px;
    &-detail {
      top: 0 * 2px;
    }
    &-sun {
      color: #fff;
      background: linear-gradient(356deg, #f7be6a 3.33%, #fad068 96.67%);
    }
    &-text {
      color: #fff;
      font-size: 11 * 2px;
      font-weight: 400;
    }
    &-value {
      color: #fff;
      font-size: 12 * 2px;
      font-weight: 510;
      margin: 0 4 * 2px;
    }
  }
  &-bottom {
    position: absolute;
    bottom: -20px;
    padding: 8 * 2px 14 * 2px;
    padding-bottom: 20 * 2px;
    width: calc(100% - 14 * 4px);
    border-radius: 10 * 2px 10 * 2px 0px 0px;
    border: 1px solid #fff;
    border-bottom: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.8) 0%,
      #C9E9FF50.09%,
      rgba(255, 255, 255, 0.8) 100%
    );
    backdrop-filter: blur(40px);
    justify-content: space-between;
    padding-top: 28 * 2px;

    &-sun {
      background: #ffecbc;
    }
    &-item {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      // max-width: 33.33333%;

      &-top {
        justify-content: flex-start;
        margin-bottom: 5 * 2px;
        min-width: 89 * 2px;
        &-right {
          padding-right: 18 * 2px;
          border-right: 0.7px solid red;
        }
        &-left {
          padding-left: 18 * 2px;
        }
      }

      &-title {
        @include multi-line-omit(1);
        font-size: 11 * 2px;
        color: #b4b7bf;
        margin-right: 8 * 2px;
      }

      &-bfb {
        font-size: 11 * 2px;
        font-weight: 400;
        color: #5c6f9b;
      }

      &-value {
        font-size: 12 * 2px;
        font-weight: 520;
        color: rgba(22, 50, 112, 0.7);
      }
    }
    &-line {
      width: 0.7px;
      height: 25 * 2px;
      margin: 0 12 * 2px;
      stroke-width: 0.5px;
      // background-color: rgba(115, 119, 128, 0.15);
    }
  }
}
.winnerteamtitle {
  position: relative;
  width: 100%;
  justify-content: center;
  margin-bottom: 10 * 2px;

  &-left {
    flex: 1;
    width: 89 * 2px;
    height: 0.4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #0189ff 100%);
    &-sun {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #f29401 100%
      );
    }
  }
  &-text {
    text-wrap: nowrap;
    white-space: nowrap;
    color: #002853;
    font-size: 15 * 2px;
    font-weight: 590;
    &-icon {
      margin: 0 10 * 2px;
      width: 8 * 2px;
      height: 8 * 2px;
    }
  }
  &-right {
    flex: 1;
    width: 89 * 2px;
    height: 0.4px;
    background: linear-gradient(90deg, #0189ff 0%, rgba(255, 255, 255, 0) 100%);
    &-sun {
      background: linear-gradient(
        90deg,
        #f29401 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }
}

.winnerteam {
  position: relative;
  top: -10 * 2px;
  background-color: #fff;
  padding-top: 5 * 2px;
  padding-bottom: 15 * 2px;
  border-radius: 0 0 12 * 2px 12 * 2px;
  &-bg {
    margin: 0 15 * 2px;
    padding: 20 * 2px 10 * 2px;
    border-radius: 12 * 2px;
    background: #edf5ff;
    &-sun {
      background: #faf7f0;
    }
  }
  &-topimg {
    position: relative;
    top: -10 * 2px;
    object-fit: cover !important;
    width: 100%;
    height: 31 * 2px;
  }
  &-line {
    width: 100%;
    height: 0px;
    border-bottom: 1px dashed rgba(115, 119, 128, 0.15);
    margin: 20 * 2px 0;
  }
}

.newWinner {
  height: 112 * 2px;
  width: 100%;
  position: relative;
  &-bg {
    width: 100%;
    height: 100%;
  }
  &-jsz {
    justify-content: center;
    flex-direction: column;
    position: absolute;
    z-index: 2;
    top: 29 * 2px;
    left: 25 * 2px;
    &-img {
      width: 16 * 2px;
      height: 24 * 2px;
      margin-bottom: 4 * 2px;
    }
    &-text {
      color: #82a2c3;
      font-size: 12 * 2px;
      font-weight: 400;
      &-sun {
        color: #c3a382;
      }
    }
  }
  &-info {
    position: absolute;
    z-index: 2;
    top: 15 * 2px;
    left: 25 * 2px;
    &-avatar {
      position: relative;
      justify-content: center;
      width: 60 * 2px;
      height: 60 * 2px;
      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      &-img {
        position: relative;
        z-index: 9;
        margin-top: 7 * 2px;
        width: 40 * 2px;
        height: 40 * 2px;
        border-radius: 100px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
    }
    &-name {
      color: #002853;
      font-size: 13 * 2px;
      font-weight: 590;
      margin-bottom: 3 * 2px;
    }
    &-sid {
      color: #82a2c3;
      font-size: 13 * 2px;
      font-weight: 400;
      &-sun {
        color: #c3a382;
      }
    }
    &-zwsj {
      width: 58 * 2px;
      line-height: 17 * 2px;
      color: #82a2c3;
      font-size: 12 * 2px;
      font-weight: 400;
      &-sun {
        color: #c3a382;
      }
    }
  }
  &-jj {
    position: absolute;
    z-index: 2;
    top: 19.5 * 2px;
    right: 28 * 2px;
    background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
    width: 110 * 2px;
    height: 60 * 2px;
    border-radius: 10 * 2px;
    // overflow: hidden;
    &-sun {
      background: linear-gradient(
        89deg,
        #f19200 0.47%,
        #f4b109 99.53%
      ) !important;
    }
    &-leftpoint {
      position: absolute;
      z-index: 5;
      left: -5 * 2px;
      top: 50%;
      transform: translateY(-50%);
      width: 10 * 2px;
      height: 10 * 2px;
      border-radius: 100px;
      background-color: #cbecff;
      &-sun {
        background-color: #faeaca;
      }
    }
    &-rightpoint {
      position: absolute;
      z-index: 5;
      right: -5 * 2px;
      top: 50%;
      transform: translateY(-50%);
      width: 10 * 2px;
      height: 10 * 2px;
      border-radius: 100px;
      background-color: #cff3ff;
      &-sun {
        background-color: #fbedcc;
      }
    }
    &-bdc {
      width: 100%;
      height: 29.5 * 2px;
      line-height: 29.5 * 2px;
      text-align: center;
      color: #fff;
      font-size: 12 * 2px;
      font-weight: 400;
    }
    &-centerline {
      width: 100%;
      height: 1 * 2px;
      border-bottom: 2px dashed rgba(0, 40, 83, 0.1);
    }
    &-money {
      width: 100%;
      height: 29.5 * 2px;
      line-height: 29.5 * 2px;
      text-align: center;
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
  &-hash {
    position: absolute;
    bottom: 3.5 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: #caeaff;
    font-size: 12 * 2px;
    font-weight: 400;
    text-align: center;
    &-sun {
      color: #ffe4b4;
    }
    &-value {
      margin-left: -3 * 2px;
      margin-right: 6 * 2px;
      color: #ffffbc;
      font-size: 13 * 2px;
      font-weight: 590;
    }
    &-copy {
      width: 15 * 2px;
      height: 15 * 2px;
    }
  }
  &-zhywxzz {
    position: absolute;
    bottom: 4 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 12 * 2px;
    font-weight: 400;
    text-align: center;
  }
}

.newTeam {
  position: relative;
  height: 112 * 2px;
  width: 100%;

  &-bg {
    width: 100%;
    height: 100%;
  }

  &-jsz {
    justify-content: center;
    flex-direction: column;
    position: absolute;
    z-index: 2;
    top: 29 * 2px;
    left: 25 * 2px;
    &-img {
      width: 16 * 2px;
      height: 24 * 2px;
      margin-bottom: 4 * 2px;
    }
    &-text {
      color: #82a2c3;
      font-size: 12 * 2px;
      font-weight: 400;
      &-sun {
        color: #c3a382;
      }
    }
  }
  &-info {
    position: absolute;
    z-index: 2;
    top: 15 * 2px;
    left: 25 * 2px;
    &-avatar {
      position: relative;
      justify-content: center;
      width: 60 * 2px;
      height: 60 * 2px;
      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      &-img {
        position: relative;
        z-index: 9;
        margin-top: 7 * 2px;
        width: 40 * 2px;
        height: 40 * 2px;
        border-radius: 100px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
    }
    &-name {
      color: #141924;
      font-size: 13 * 2px;
      font-weight: 590;
      margin-bottom: 3 * 2px;
    }
    &-sid {
      color: #82a2c3;
      font-size: 13 * 2px;
      font-weight: 400;
      &-sun {
        color: #c3a382;
      }
    }
    &-zwsj {
      width: 58 * 2px;
      line-height: 17 * 2px;
      color: #82a2c3;
      font-size: 12 * 2px;
      font-weight: 400;
      &-sun {
        color: #c3a382;
      }
    }
  }
  &-jj {
    position: absolute;
    z-index: 2;
    top: 19.5 * 2px;
    right: 28 * 2px;
    background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
    width: 110 * 2px;
    height: 60 * 2px;
    border-radius: 10 * 2px;
    &-sun {
      background: linear-gradient(89deg, #f19200 0.47%, #f4b109 99.53%);
    }
    &-leftpoint {
      position: absolute;
      z-index: 5;
      left: -5 * 2px;
      top: 50%;
      transform: translateY(-50%);
      width: 10 * 2px;
      height: 10 * 2px;
      border-radius: 100px;
      background-color: #cbecff;
      &-sun {
        background-color: #faeaca;
      }
    }
    &-rightpoint {
      position: absolute;
      z-index: 9;
      right: -5 * 2px;
      top: 50%;
      transform: translateY(-50%);
      width: 10 * 2px;
      height: 10 * 2px;
      border-radius: 100px;
      background-color: #cff3ff;
      &-sun {
        background-color: #fbedcc;
      }
    }
    &-bdc {
      width: 100%;
      height: 29.5 * 2px;
      line-height: 29.5 * 2px;
      text-align: center;
      color: #fff;
      font-size: 12 * 2px;
      font-weight: 400;
    }
    &-centerline {
      width: 100%;
      height: 1 * 2px;
      border-bottom: 2px dashed rgba(0, 40, 83, 0.1);
    }
    &-money {
      width: 100%;
      height: 29.5 * 2px;
      line-height: 29.5 * 2px;
      text-align: center;
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }

  &-dwxzjl {
    position: absolute;
    bottom: 0 * 2px;
    height: 22 * 2px;
    width: 100%;
    color: #fff;
    font-size: 12 * 2px;
    font-weight: 400;
    justify-content: space-between;

    &-left {
      width: 89 * 2px;
      height: 0.3px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
      );
    }
    &-right {
      width: 89 * 2px;
      height: 0.3px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }
    &-center {
      &-text {
        color: #fff;
        font-size: 12 * 2px;
        font-weight: 400;
      }
      &-img {
        margin-left: 8 * 2px;
        width: 10 * 2px;
        height: 10 * 2px;
      }
    }
  }
}

.participants {
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fff;
  padding: 10 * 2px 15 * 2px;
  margin-bottom: 10 * 2px;
  border-radius: 12 * 2px;
  overflow: hidden;

  &-item {
    flex-direction: column;
    justify-content: center;
    padding: 12.5 * 2px 0;
    width: 50%;
    &-top {
      color: #002853;
      font-size: 13 * 2px;
      font-weight: 590;
      margin-bottom: 4 * 2px;
    }
    &-bottom {
      color: #999da7;
      font-size: 12 * 2px;
      font-weight: 400;
    }
  }
}
.inviter {
  background: linear-gradient(96deg, #c0dfff -2.81%, #d0f4ff 100.22%);
  border-radius: 12 * 2px;
  overflow: hidden;
  margin: 0 12 * 2px;
  // margin-top: 8 * 2px;
  &-sun {
    background: linear-gradient(96deg, #f5e2c5 -2.81%, #fbeecc 100.22%);
  }
  &-lefttop {
    border-radius: 12 * 2px 0px;
    background: #a7d4ff;
    display: inline-flex;
    padding: 2 * 2px 8 * 2px;
    &-text {
      font-size: 15 * 2px;
      color: #002853;
      font-weight: 590;
      margin-right: 10 * 2px;
    }
    &-img {
      width: 15 * 2px;
      height: 15 * 2px;
    }
    &-sun {
      background: #ecd4a9;
    }
  }

  &-notData {
    flex-direction: column;
    justify-content: center;
    &-img {
      width: 40 * 2px;
      height: 40 * 2px;
      margin-top: -5 * 2px;
      margin-bottom: 8 * 2px;
    }
    &-text {
      font-size: 11 * 2px;
      color: #82a2c3;
      font-weight: 400;
      margin-bottom: 9 * 2px;
      &-sun {
        color: #c3a382;
      }
    }
  }

  &-content {
    justify-content: space-between;
    margin-bottom: 10 * 2px;

    &-info {
      margin-left: 21.5 * 2px;
      &-avatar {
        position: relative;
        z-index: 9;
        width: 40 * 2px;
        height: 40 * 2px;
        border-radius: 100px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      &-name {
        color: #002853;
        font-size: 13 * 2px;
        font-weight: 590;
        margin-bottom: 3 * 2px;
      }
      &-sid {
        color: #82a2c3;
        font-size: 13 * 2px;
        font-weight: 400;
        &-sun {
          color: #c3a382;
        }
      }
    }
    &-jj {
      position: relative;
      z-index: 2;
      background: linear-gradient(
        90deg,
        rgba(0, 123, 255, 0.3) 0.07%,
        rgba(0, 178, 255, 0.3) 99.93%
      );
      width: 130 * 2px;
      height: 50 * 2px;
      border-radius: 10 * 2px;
      // margin-left: 15 * 2px;
      margin-right: 9 * 2px;
      &-sun {
        background: linear-gradient(
          89deg,
          rgba(241, 146, 0, 0.3) 0.47%,
          rgba(244, 177, 9, 0.3) 99.53%
        );
      }

      &-leftpoint {
        position: absolute;
        z-index: 5;
        left: -5 * 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 10 * 2px;
        height: 10 * 2px;
        border-radius: 100px;
        background-color: #caebff;
        &-sun {
          background-color: #f9e9ca;
        }
      }
      &-rightpoint {
        position: absolute;
        z-index: 9;
        right: -5 * 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 10 * 2px;
        height: 10 * 2px;
        border-radius: 100px;
        background-color: #cff3ff;
        &-sun {
          background-color: #fbeecc;
        }
      }

      &-bdc {
        white-space: nowrap;
        width: 100%;
        height: 24.5 * 2px;
        line-height: 24.5 * 2px;
        text-align: center;
        color: #366fab;
        font-size: 12 * 2px;
        font-weight: 400;
        &-sun {
          color: #d29028;
        }
      }
      &-centerline {
        width: 100%;
        height: 1 * 2px;
        border-bottom: 2px dashed rgba(0, 40, 83, 0.1);
      }
      &-money {
        white-space: nowrap;
        width: 100%;
        height: 24.5 * 2px;
        line-height: 24.5 * 2px;
        text-align: center;
        color: #366fab;
        font-size: 11 * 2px;
        font-weight: 400;
        &-sun {
          color: #d29028;
        }
      }
    }
  }
  &-line {
    justify-content: center;
    &-left {
      width: 3 * 2px;
      height: 8 * 2px;
      margin-right: 78%;
      background: linear-gradient(270deg, #01a8ff 0%, #0062ca 100%);
      &-sun {
        background: linear-gradient(89deg, #f19200 0.47%, #f4b109 99.53%);
      }
    }
    &-right {
      width: 3 * 2px;
      height: 8 * 2px;
      background: linear-gradient(270deg, #01a8ff 0%, #0062ca 100%);
      &-sun {
        background: linear-gradient(89deg, #f19200 0.47%, #f4b109 99.53%);
      }
    }
  }
}

.popoverEnd {
  position: relative;
  z-index: 999998 !important;
  background: transparent !important;
  left: 10 * 2px !important;
  right: 90 * 2px !important;
  &-alert {
    position: relative;
    margin: 0 5vw;
    // max-width: 85vw;
    padding: 6 * 2px 12 * 2px;
    color: #fff;
    font-size: 11 * 2px;
    white-space: pre-wrap;
    background: rgba(10, 31, 106, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 8 * 2px;
    overflow: hidden;
  }
}
</style>
<style lang="scss">
.popoverEnd {
  .van-popover__content {
    background: transparent !important;
    box-shadow: none;
  }
  .van-popover__arrow {
    color: rgba(10, 31, 106, 0.4) !important;
    backdrop-filter: blur(0px) !important;
    left: 33% !important;
  }
}
</style>
